<!--
工作台：
源码地址：smallshaxiaoche
创建者: smallshaxiaoche
创建时间：2019-05-26
联系邮箱：2233850112@gmail.com
-->

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>拓客工作中心(请勿外传)</title>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
            height: 100%;
            background-color: #f4f4f9;
            font-family: 'Arial', sans-serif;
            color: #333;
        }

        .container {
            background-color: #fff;

        }

        .container-header {
            display: flex;
            align-items: center;
            font-size: 14px;
            font-weight: bold;
            height: 40px;
            padding-left: 10px;

        }

        .container-body {
            display: flex;
            border-top: 1px solid #dfdfdf;
            padding: 20px 10px 0 10px;
            /*justify-content: space-between;*/
            flex-direction: row;
            flex-wrap: wrap;
        }

        .container div {
            display: flex;
        }

        .item-block {
            border: 1px solid #dfdfdf;
            flex-direction: column;
            height: 160px;
            width: 24%;
            margin-bottom: 20px;
            margin-right: 10px;

        }

        a:link {
            /* 超链接正常状态下的样式 */
            color: #000000;
            /* 黑色 */
            text-decoration: none;
            /* 无下划线 */
        }

        a:visited {
            /* 访问过的超链接 */
            color: #000000;
            /* 黑色 */
            text-decoration: none;
            /* 无下划线 */
        }


        .item-top {
            height: 80px;
            padding: 20px;
        }

        .item-logo {
            width: 60px;
            height: 60px;
            margin-right: 15px;
        }

        .item-logo img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            object-position: center;
        }

        .item-body {
            flex-direction: column;
            width: 79%;
        }

        .item-bottom {
            height: 40px;
            justify-content: space-around;
            align-items: center;
            color: #888888;
            background-color: #F7F7F7;
            font-size: 13px;
        }


        .item-bottom > a:nth-child(1){
            color:#0066CC;
        }
        .item-bottom > a:nth-child(3){
            color:#99CC00;
        }

        /*.item-bottom > a:nth-child(0){*/
        /*    color:red;*/
        /*}*/

        .title {
            font-size: 16px;
            font-weight: bold;
            padding-bottom: 10px;
        }

        .notice {
            font-size: 12px;
            color: #888;
        }

        .divider {
            height: 20px;
            width: 1px;
            background-color: #dfdfdf;
        }

        .sidebar {
            position: fixed;
            top: 0;
            left: 0;
            width: 220px;
            height: 100%;
            background-color: #007BFF;
            color: white;
            padding-top: 20px;
            box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
            transition: width 0.3s ease;
            overflow-y: auto;
        }

        .sidebar a {
            padding: 15px 20px;
            text-decoration: none;
            font-size: 16px;
            color: white;
            display: block;
            transition: background-color 0.3s, transform 0.3s;
        }

        .sidebar a:hover {
            background-color: #66B2FF;
        }

        .sidebar a.active {
            background-color: #0056b3;
            font-weight: bold;
            transform: scale(1.05);
        }

        .main-content {
            margin: 80px auto; /* Center the content horizontally */
            padding: 20px;
            transition: margin-top 0.3s;
            background-color: #ffffff;
            min-height: 100vh;
            box-sizing: border-box;
            max-width: 1200px; /* Set a maximum width for the content */
        }

        .container {
            display: none;
            opacity: 0;
            transition: opacity 0.3s ease-in-out;
        }

        .container.active {
            display: block;
            opacity: 1;
        }

        .container-header {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 10px;
            color: #2980b9;
        }

        .container-body {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 20px;
            padding: 20px;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .item-block {
            border: 1px solid #e1e1e1;
            border-radius: 8px;
            overflow: hidden;
            transition: transform 0.3s, box-shadow 0.3s;
        }

        .item-block:hover {
            transform: translateY(-5px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        .item-top {
            display: flex;
            align-items: center;
            padding: 15px;
            background-color: #f9f9f9;
        }

        .item-logo {
            width: 60px;
            height: 60px;
            margin-right: 15px;
        }

        .item-logo img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            object-position: center;
        }

        .item-body {
            flex: 1;
        }

        .title {
            font-size: 16px;
            font-weight: bold;
            color: #333;
        }

        .notice {
            font-size: 12px;
            color: #777;
        }

        .item-bottom {
            display: flex;
            justify-content: space-around;
            align-items: center;
            padding: 10px;
            background-color: #f4f4f9;
            font-size: 13px;
            color: #888;
        }

        .divider {
            height: 20px;
            width: 1px;
            background-color: #dfdfdf;
        }

        .top-nav {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 60px;
            background-color: #007BFF; /* Bright blue background */
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            z-index: 1000;
        }

        .top-nav a {
            padding: 15px 20px;
            text-decoration: none;
            font-size: 16px;
            color: white;
            transition: background-color 0.3s, transform 0.3s;
            margin: 0 10px;
        }

        .top-nav a:hover {
            background-color: #66B2FF; /* Lighter blue on hover */
        }

        .top-nav a.active {
            background-color: #0056b3; /* Darker blue for active link */
            font-weight: bold;
            transform: scale(1.05);
        }

        .main-content {
            margin-top: 80px; /* Adjust for the height of the top nav */
            padding: 20px;
            transition: margin-top 0.3s;
            background-color: #ffffff;
            min-height: 100vh;
            box-sizing: border-box;
        }

        /* 培训页面全屏样式 */
        .training-fullscreen .main-content {
            margin-top: 80px;
            padding: 0;
            max-width: none;
        }
        
        .training-fullscreen #training {
            width: 100vw;
            margin-left: calc(-50vw + 50%);
        }
        
        .training-fullscreen #training .container-body {
            height: calc(100vh - 80px) !important;
            width: 100vw;
        }
    </style>
</head>

<body>
    <div class="top-nav">
        <a href="#" data-target="training">培训</a>
        <a href="#" data-target="ai-tools">AI工具</a>
        <a href="#" data-target="workbench">工作台</a>
        <a href="#" data-target="internal-sites">内部网站</a>
        <a href="#" data-target="test-only">测试专用</a>
    </div>

    <div class="main-content">
        <div class="container" id="workbench">
            <div class="container-header">工作台</div>
            <div class="container-body">
                <div class="item-block">
                    <a href="http://wiki.qidianbox.com/" target="_blank">
                        <div class="item-top">
                            <div class="item-logo"><img src="img/showdoc.png"></div>
                            <div class="item-body">
                                <span class="title">ShowDoc文档系统</span>
                                <span class="notice">内部文档系统</span>
                            </div>
                        </div>
                    </a>
                    <div class="item-bottom">
                        <a href="http://wiki.qidianbox.com/" target="_blank">
                            <div>登录地址</div>
                        </a>
                    </div>
                </div>

                <div class="item-block">
                    <a href="https://e.gitee.com/qidianbox/code/repos" target="_blank">
                        <div class="item-top">
                            <div class="item-logo"><img src="img/gitlab.png"></div>
                            <div class="item-body">
                                <span class="title">Gitee系统</span>
                                <span class="notice">Gitee内部代码仓库</span>
                            </div>
                        </div>
                    </a>
                    <div class="item-bottom">
                        <a href="https://e.gitee.com/qidianbox/code/repos" target="_blank">
                            <div>登录地址</div>
                        </a>
                    </div>
                </div>

                <div class="item-block">
                    <a href="http://47.94.56.31:8000" target="_blank">
                        <div class="item-top">
                            <div class="item-logo"><img src="img/sql2.png"></div>
                            <div class="item-body">
                                <span class="title">数据库系统</span>
                                <span class="notice">内部据库审核平台(沙肇阳开账号)</span>
                            </div>
                        </div>
                    </a>
                    <div class="item-bottom">
                        <a href="https://dba.qidianbox.com/login/" target="_blank">
                            <div>登录地址</div>
                        </a>
                    </div>
                </div>
                <div class="item-block">
                    <a href="https://signin.aliyun.com/login.htm?username=aliyunlog@50258381.onaliyun.com&defaultShowQrCode=false" target="_blank">
                        <div class="item-top">
                            <div class="item-logo"><img src="img/aliyun.png"></div>
                            <div class="item-body">
                                <span class="title">内部阿里云日志</span>
                                <span class="notice">内部阿里云日志(各个平台找负责人要)</span>
                            </div>
                        </div>
                    </a>
                    <div class="item-bottom">
                        <a href="https://signin.aliyun.com/login.htm?username=aliyunlog@50258381.onaliyun.com&defaultShowQrCode=false" target="_blank">
                            <div>登录地址</div>
                        </a>
                    </div>
                </div>
                <div class="item-block">
                    <a href="http://192.168.8.21:8001/" target="_blank">
                        <div class="item-top">
                            <div class="item-logo"><img src="img/spug.png"></div>
                            <div class="item-body">
                                <span class="title">运维平台</span>
                                <span class="notice">内部Spug运维平台</span>
                            </div>
                        </div>
                    </a>
                    <div class="item-bottom">
                        <a href="http://192.168.8.21:8001/" target="_blank">
                            <div>登录地址</div>
                        </a>
                    </div>
                </div>



                <div class="item-block">
                    <a href="https://lanhuapp.com/web/#/item" target="_blank">
                        <div class="item-top">
                            <div class="item-logo"><img src="img/lanhu.png"></div>
                            <div class="item-body">
                                <span class="title">蓝湖</span>
                                <span class="notice">内部设计系统</span>
                            </div>
                        </div>
                    </a>
                    <div class="item-bottom">
                        <a href="https://lanhuapp.com/web/#/item" target="_blank">
                            <div>登录地址</div>
                        </a>
                    </div>
                </div>

                <div class="item-block">
                    <a href="https://chat.openai.com" target="_blank">
                        <div class="item-top">
                            <div class="item-logo"><img src="img/chatgpt.png"></div>
                            <div class="item-body">
                                <span class="title">chatgpt</span>
                                <span class="notice">chatgpt</span>
                            </div>
                        </div>
                    </a>
                    <div class="item-bottom">
                        <a href="https://chat.openai.com" target="_blank">
                            <div>登录地址</div>
                        </a>
                    </div>
                </div>

            </div>
        </div>


        <div class="container" id="internal-sites">
            <div class="container-header">内部网站</div>
            <div class="container-body">
                <div class="item-block">
                    <div class="item-top">
                        <div class="item-logo"><img src="img/jiafenbao.png"></div>
                        <div class="item-body">
                            <span class="title">加粉宝(商户)</span>
                            <span class="notice">加粉商户登录</span>
                        </div>
                    </div>
                    <div class="item-bottom">
                        <a href="https://www.jfb.qidianbox.com" target="_blank">
                            <div>测试</div>
                        </a>
                        <div class="divider"></div>
                        <a href="https://ad.jiafen.pro/" target="_blank">
                            <div>线上</div>
                        </a>
                    </div>
                </div>

                <div class="item-block">
                    <div class="item-top">
                        <div class="item-logo"><img src="img/jiafenbao.png"></div>
                        <div class="item-body">
                            <span class="title">加粉宝(总后台)</span>
                            <span class="notice">加粉总后台登录</span>
                        </div>
                    </div>
                    <div class="item-bottom">
                        <a href="http://admin.jiafen.qidianbox.com/" target="_blank">
                            <div>测试</div>
                        </a>
                        <div class="divider"></div>
                        <a href="https://manage.qidianbox.com/" target="_blank">
                            <div>线上</div>
                        </a>
                    </div>
                </div>

                <!-- <div class="item-block">
                    <div class="item-top">
                        <div class="item-logo"><img src="img/juhaomai.png"></div>
                        <div class="item-body">
                            <span class="title">平台版(商户)</span>
                            <span class="notice">平台版商户登录</span>
                        </div>
                    </div>
                    <div class="item-bottom">
                        <a href="https://ad.mingyaokj.top/" target="_blank">
                            <div>测试</div>
                        </a>
                        <div class="divider"></div>
                        <a href="https://ad.juhaom.com" target="_blank">
                            <div>线上</div>
                        </a>
                    </div>
                </div>

                <div class="item-block">
                    <a href="https://boss.juhaom.com" target="_blank">
                        <div class="item-top">
                            <div class="item-logo"><img src="img/juhaomai.png"></div>
                            <div class="item-body">
                                <span class="title">平台版(总后台)</span>
                                <span class="notice">平台总后台登录</span>
                            </div>
                        </div>
                    </a>
                    <div class="item-bottom">
                        <a href="https://boss.mingyaokj.top/#/" target="_blank">
                            <div>测试</div>
                        </a>
                        <div class="divider"></div>
                        <a href="https://boss.juhaom.com" target="_blank">
                            <div>线上</div>
                        </a>
                    </div>
                </div> -->


                <div class="item-block">
                    <a href="https://jhs.fenghuajinming.cn" target="_blank">
                        <div class="item-top">
                            <div class="item-logo"><img src="img/jhs.png"></div>
                            <div class="item-body">
                                <span class="title">寄划算</span>
                                <span class="notice">寄划算商户后台</span>
                            </div>
                        </div>
                    </a>
                    <div class="item-bottom">
                        <a href="https://jhs.fenghuajinming.cn" target="_blank">
                            <div>测试</div>
                        </a>
                    </div>
                </div>

                <div class="item-block">
                    <a href="https://boss.fenghuajinming.cn/#/login/index" target="_blank">
                        <div class="item-top">
                            <div class="item-logo"><img src="img/jhs.png"></div>
                            <div class="item-body">
                                <span class="title">寄划算</span>
                                <span class="notice">寄划算总后台</span>
                            </div>
                        </div>
                    </a>
                    <div class="item-bottom">
                        <a href="https://boss.fenghuajinming.cn/#/login/index" target="_blank">
                            <div>测试</div>
                        </a>
                    </div>
                </div>

            </div>
        </div>

        <div class="container" id="test-only">
            <div class="container-header">测试专用</div>
            <div class="container-body">


                <div class="item-block">
                    <div class="item-top">
                        <div class="item-logo"><img src="img/ceshi.png"></div>
                        <div class="item-body">
                            <span class="title">测试平台</span>
                            <span class="notice">测试平台(找史鹏杰开账号)</span>
                        </div>
                    </div>
                    <div class="item-bottom">
                        <a href="http://192.168.8.22:8034/#/manage/projectManage" target="_blank">
                            <div>测试</div>
                        </a>
                    </div>
                </div>



            </div>
        </div>

        <div>

            <div class="container" id="jiafen"></div>
        </div>

        <div class="container" id="ai-tools">
            <div class="container-header">AI工具</div>

            <!-- <div class="container-body">
                <div class="item-block">
                    <a href="https://chat.openai.com" target="_blank">
                        <div class="item-top">
                            <div class="item-logo"><img src="img/chatgpt.png"></div>
                            <div class="item-body">
                                <span class="title">ChatGPT</span>
                                <span class="notice">OpenAI官方ChatGPT</span>
                            </div>
                        </div>
                    </a>
                    <div class="item-bottom">
                        <a href="https://chat.openai.com" target="_blank">
                            <div>登录地址</div>
                        </a>
                    </div>
                </div>


                <div class="item-block">
                    <a href="https://kimi.moonshot.cn" target="_blank">
                        <div class="item-top">
                            <div class="item-logo"><img src="img/kimi.png"></div>
                            <div class="item-body">
                                <span class="title">Kimi</span>
                                <span class="notice">月之暗面AI助手</span>
                            </div>
                        </div>
                    </a>
                    <div class="item-bottom">
                        <a href="https://kimi.moonshot.cn" target="_blank">
                            <div>登录地址</div>
                        </a>
                    </div>
                </div>

                <div class="item-block">
                    <a href="https://windsurf.com/editor" target="_blank">
                        <div class="item-top">
                            <div class="item-logo"><img src="img/windsurf.png"></div>
                            <div class="item-body">
                                <span class="title">Windsurf Editor</span>
                                <span class="notice">AI代码编辑器</span>
                            </div>
                        </div>
                    </a>
                    <div class="item-bottom">
                        <a href="https://windsurf.com/editor" target="_blank">
                            <div>登录地址</div>
                        </a>
                    </div>
                </div>

                <div class="item-block">
                    <a href="https://www.aiprompter.cc/" target="_blank">
                        <div class="item-top">
                            <div class="item-logo"><img src="img/aika.png"></div>
                            <div class="item-body">
                                <span class="title">AI Prompter</span>
                                <span class="notice">AI提示词工具</span>
                            </div>
                        </div>
                    </a>
                    <div class="item-bottom">
                        <a href="https://www.aiprompter.cc/" target="_blank">
                            <div>登录地址</div>
                        </a>
                    </div>
                </div>

                <div class="item-block">
                    <a href="https://goblin.tools/ToDo" target="_blank">
                        <div class="item-top">
                            <div class="item-logo"><img src="img/goblin.png"></div>
                            <div class="item-body">
                                <span class="title">Goblin Tools</span>
                                <span class="notice">AI任务分解工具</span>
                            </div>
                        </div>
                    </a>
                    <div class="item-bottom">
                        <a href="https://goblin.tools/ToDo" target="_blank">
                            <div>登录地址</div>
                        </a>
                    </div>
                </div>

                <div class="item-block">
                    <a href="https://design.gemcoder.com" target="_blank">
                        <div class="item-top">
                            <div class="item-logo"><img src="img/gem.png"></div>
                            <div class="item-body">
                                <span class="title">Gemcoder</span>
                                <span class="notice">竞品需求快速复刻和统一组件</span>
                            </div>
                        </div>
                    </a>
                    <div class="item-bottom">
                        <a href="https://design.gemcoder.com" target="_blank">
                            <div>登录地址</div>
                        </a>
                    </div>
                </div>

                <div class="item-block">
                    <a href="https://www.pm-ai.cn/" target="_blank">
                        <div class="item-top">
                            <div class="item-logo"><img src="img/pmai.jpg"></div>
                            <div class="item-body">
                                <span class="title">PM-AI</span>
                                <span class="notice">PRD快速生成和测试用例</span>
                            </div>
                        </div>
                    </a>
                    <div class="item-bottom">
                        <a href="https://www.pm-ai.cn/" target="_blank">
                            <div>登录地址</div>
                        </a>
                    </div>
                </div>

                <div class="item-block">
                    <a href="https://mastergo.com" target="_blank">
                        <div class="item-top">
                            <div class="item-logo"><img src="img/mastergo.png"></div>
                            <div class="item-body">
                                <span class="title">MasterGo</span>
                                <span class="notice">草图和竞品快速生成原型</span>
                            </div>
                        </div>
                    </a>
                    <div class="item-bottom">
                        <a href="https://mastergo.com" target="_blank">
                            <div>登录地址</div>
                        </a>
                    </div>
                </div>

            </div>
        </div>

        <div class="container" id="training">
            <div class="container-body" style="padding: 0; margin: 0; height: calc(100vh - 80px); background: #fff;">
                <iframe src="ai使用.pdf" 
                        style="width: 100%; height: 100%; border: none; display: block;"
                        type="application/pdf">
                    <p>您的浏览器不支持PDF预览，请<a href="ai使用.pdf" target="_blank">点击这里下载PDF文件</a></p>
                </iframe>
            </div>
        </div>
    </div>

    <script>
        // Cookie操作函数
        function setCookie(name, value, days) {
            const expires = new Date();
            expires.setTime(expires.getTime() + (days * 24 * 60 * 60 * 1000));
            document.cookie = name + '=' + value + ';expires=' + expires.toUTCString() + ';path=/';
        }

        function getCookie(name) {
            const nameEQ = name + "=";
            const ca = document.cookie.split(';');
            for(let i = 0; i < ca.length; i++) {
                let c = ca[i];
                while (c.charAt(0) == ' ') c = c.substring(1, c.length);
                if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
            }
            return null;
        }

        document.querySelectorAll('.top-nav a').forEach(link => {
            link.addEventListener('click', function (e) {
                e.preventDefault();
                const targetId = this.getAttribute('data-target');

                // Hide all containers and remove active class from all links
                document.querySelectorAll('.container').forEach(container => {
                    container.classList.remove('active');
                });
                document.querySelectorAll('.top-nav a').forEach(link => {
                    link.classList.remove('active');
                });

                // 移除之前的全屏样式
                document.body.classList.remove('training-fullscreen');

                // Show the target container and highlight the active link
                document.getElementById(targetId).classList.add('active');
                this.classList.add('active');

                // 如果是培训页面，添加全屏样式
                if (targetId === 'training') {
                    document.body.classList.add('training-fullscreen');
                }

                // 保存选中的tab到cookie
                setCookie('activeTab', targetId, 30);
            });
        });

        // 从cookie读取上次选中的tab并激活
        const savedTab = getCookie('activeTab');
        if (savedTab) {
            const savedContainer = document.getElementById(savedTab);
            const savedLink = document.querySelector(`[data-target="${savedTab}"]`);
            if (savedContainer && savedLink) {
                savedContainer.classList.add('active');
                savedLink.classList.add('active');
                // 如果保存的是培训页面，添加全屏样式
                if (savedTab === 'training') {
                    document.body.classList.add('training-fullscreen');
                }
            }
        } else {
            // 如果没有保存的tab，默认激活第一个
            const firstContainer = document.querySelector('.container');
            const firstLink = document.querySelector('.top-nav a');
            if (firstContainer && firstLink) {
                firstContainer.classList.add('active');
                firstLink.classList.add('active');
            }
        }
    </script>
</body>

</html>